<template>
  <div class='applyAccount'>
      <van-form @submit="onSubmit" class="formBox">
        <van-field
            v-model="username"
            name="用户名称"
            label="用户名称"
            placeholder="请输入机构/公司名称"
            :rules="[{ required: true, message: '请填写请输入机构/公司名称' }]"
        />
        <van-field
            v-model="phone"
            name="手机号"
            label="手机号"
            placeholder="请输入手机号"
            type="tel"
            :rules="[{ required: true, message: '请填写收货人手机号' }]"
        /> 
        <van-field class="codeLabel"
            v-model="sms"
            center
            clearable
            label="验证码"
            placeholder="请输入验证码"
            :rules="[{ required: true, message: '请填写验证码' }]"
            >
            <template #button>
                <van-button size="small" type="primary">获取验证码</van-button>
            </template>
        </van-field>
        <van-field class="cityLabel"
            v-model="address"
            name="所在地域"
            label="所在地域">
            <template #button>
                <div class="cityInput">
                    <div class="box-col" @click="selectCity(1)">{{currProvince.areaName || '省'}}<van-icon :name="iconUnDown" /></div>
                    <div class="box-col" @click="selectCity(2)">{{currCity.areaName || '市'}}<van-icon :name="iconUnDown" /></div>
                    <div class="box-col" @click="selectCity(3)">{{currRegion.areaName || '县/区'}}<van-icon :name="iconUnDown" /></div>
                </div>
            </template>
        </van-field>
        <van-field class="lastLabel"
            v-model="industry"
            name="行业"
            label="行业"
            placeholder="请输入所属行业"
            :rules="[{ required: true, message: '请填行业' }]"
        />
        <div class="van-buttons">
            <van-button native-type="submit" type="primary" size="28" color="#DB1919" block>申请免费直播间</van-button>
        </div>
    </van-form>

    <van-action-sheet
      class="cityPopupBox"
      v-model="diaogCityShow"
      title="选择所在地"
    >
      <van-index-bar class="indexBar" :sticky="false" highlight-color="#fb6463">
          <van-index-anchor v-for="(item, index) in provinceList" :key="index" v-show="item.length > 0">
            <div class="layout-box">
              <span class="indexWord">{{ index }}</span>
              <div class="box-col">
                <van-cell @click="chooseProvince(citem,cindex)" v-for="(citem, cindex) in item" :key="cindex" :title="citem.areaName" :class="currIndex === citem.code?'on':''">
                  <template #right-icon v-if="currIndex === citem.code">
                    <van-checkbox v-model="cityModel" checked-color="#ee0a24" ref="checkboxes" />
                  </template>
                </van-cell>
              </div>
            </div>
          </van-index-anchor>
      </van-index-bar>
    </van-action-sheet>

  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
import $api from "@/api/index";
export default {
  // import引入的组件需要注入到对象中才能使用
  name:'applyAccount',
  components: {},
  data () {
  // 这里存放数据
    return {
      iconUnDown: require("@/assets/icon/icon-upDown.png"),
      currIndex:110000,
      cityModel:true,
      diaogCityShow: false,
      FirstPin: [
        "A",
        "B",
        "C",
        "D",
        "E",
        "F",
        "G",
        "H",
        "J",
        "K",
        "L",
        "M",
        "N",
        "P",
        "Q",
        "R",
        "S",
        "T",
        "W",
        "X",
        "Y",
        "Z",
      ],
      provinceList: [],
      currProvince: "",
      currCity: "",
      currRegion: "",
      currClick:'',

      userName:'',
      phone:'',
      sms:'',
      address:'',
      industry:''
    };
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    getCity(parentId,index){
      let vm = this
      let params = {
        parentId:parentId
      }
      $api.shopApi.excludeAreas(params).then((res)=>{
        //console.log(res.data)
        if(res.status == 10000){
          this.diaogCityShow = true;
          let pinyin = require("js-pinyin");
          pinyin.setOptions({ checkPolyphone: false, charCase: 0 });
          let list = [];
          let dataList = [];
          let name = {};
          dataList = res.data;
          for (let p in dataList) {
            list.push(dataList[p]);
          }
          this.FirstPin.forEach((item) => {
            name[item] = [];
            list.forEach((el) => {
              let first = pinyin.getFullChars(el.areaName).substring(0, 1);
              if (first == item) {
                name[item].push(el);
              }
            });
          });
          this.provinceList = name
          if(this.currClick == 1){
            if(!vm.currProvince){
                this.currIndex = dataList[0].code;
            }
          }
        }else{
          this.$toast('查询出错了')
        }
      })
    },
    selectCity(index) {
      let vm = this
      vm.currClick = index
      if (index == 1) {
        this.getCity('0',index)
        if(vm.currProvince){
            this.currIndex = vm.currProvince.code;
        }
      } else if (index == 2) {
          if(vm.currProvince){
            console.log(vm.currProvince)
            this.getCity(vm.currProvince.code,index)
            this.currIndex = vm.currCity.code;
          }else{
              this.$toast('请先选择省')
          }
      } else if (index == 3) {
          if(vm.currCity){
            this.getCity(this.currCity.code,index)
            this.currIndex = vm.currRegion.code;
          }else{
              this.$toast('请先选择市')
          }
      }
    },
    chooseProvince(item) {
      if(this.currClick == 1){
        this.currProvince = item;
        this.currCity = "";
        this.currRegion = "";
      }else if(this.currClick == 2){
        this.currCity = item;
        this.currRegion = "";
      }else if(this.currClick == 3){
        this.currRegion = item;
      }
      this.diaogCityShow = false
    },
    
    onSubmit(){
        if(this.currProvince && this.currCity && this.currRegion){
            console.log(this.currProvince)
            console.log(this.currCity)
            console.log(this.currRegion)
        }else{
            this.$toast('请选择所在地区')
        }
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {

  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {

  },
  beforeCreate () {}, // 生命周期 - 创建之前
  beforeMount () {}, // 生命周期 - 挂载之前
  beforeUpdate () {}, // 生命周期 - 更新之前
  updated () {}, // 生命周期 - 更新之后
  beforeDestroy () {}, // 生命周期 - 销毁之前
  destroyed () {}, // 生命周期 - 销毁完成
  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang='scss' scoped>
// @import url(); 引入公共css类
.applyAccount{
    height: 100vh;
    overflow-x: auto;
    background: #F6F6F6;
    .formBox{
        .van-cell{
            margin-bottom: 24px;
            line-height: 52px;
            padding: 30px 24px;
        }
        .van-buttons{
            padding: 88px 24px 0;
        }
    }
}
</style>
<style lang='scss'>
.applyAccount{
    .formBox{
        .van-field__body{
          .van-field__control{
            &::placeholder{
            color: #333333 !important;
            }
          }
        }
        .van-field__error-message{
            display: none;
        }
        .van-field__button{
            button{
                background: none;
                border: none;
                color: #DB1919;
                font-size: 28px;
            }
        }
        .codeLabel{
            .van-field__label{
                span{
                    letter-spacing:15px
                }
            }
        }
        .lastLabel{
            .van-field__label{
                span{
                    letter-spacing:60px
                }
            }
        }
        .cityLabel{
            .van-field__body{
                .van-field__control{
                    display: none;
                }
                .van-field__button{
                    width: 100%;
                    padding: 0;
                    .cityInput{
                        text-align: left;
                        .box-col {
                            min-width:33.33%;
                            float: left;
                            .van-icon{
                                margin-left: 12px;
                            }
                        }
                    }
                }
            }
        }
    }
}
</style>
